<style lang="less">
    .canvas-box {
        padding:0 25px;
        margin:15px 0;

    }
    .canvas-box .bg-cover{
        background: linear-gradient(135deg, #00cc99, #00cccc);
        color: #fff;
        padding: 10px;
        border-radius: 4px;
    }
    .chart-canvas {
        width: 100% !important;
    }

    .show-tip {
        margin-bottom:20px;
    }
</style>
<template>
    <div class="canvas-box" id="canvasBox">
        <div class="bg-cover">
            <div class="show-tip flex-layout">
                {{this.showTip}}<template v-if="(this.rank)">(第{{this.rank}}名)</template> <div class="flex"></div>
                {{this.step}}
            </div>
            <canvas class="chart-canvas" id="myChart"></canvas>
        </div>

    </div>
</template>
<script>
    import Chart from 'chart.js'
    export default {
        data(){
            return {

            }
        },
        watch:{
            data(n, o){
                this.initChart();
            }
        },
        methods:{
           initChart() {
               var ctx = document.getElementById("myChart");
               let labels = this.labels;
               let data = this.data;

               Chart.defaults.global.defaultFontColor = '#fff';
               var myChart = new Chart(ctx, {
                   type: 'line',
                   data: {
                       labels: labels,
                       datasets: [{
                           label:'',
                           data,
                           pointColor : "#fff",
                           pointStrokeColor : "#fff",
                           pointBackgroundColor: '#fff',
                           borderWidth: 2,
                           borderColor:'rgba(255,255,255,.6)',
                           backgroundColor:'rgba(255,255,255,.2)',
                       }]
                   },
                   options: {
                       responsive: false,
                       legend: {display: false},
                       scales: {
                            xAxes: [{
                                gridLines:{
                                    display: false,
                                    drawBorder: false,
                                }
                            }],
                            yAxes: [{
                                ticks: {
                                    display: false,
                                    min: 0,
                                },
                                gridLines:{
                                    display: true,
                                    drawBorder: false,
                                    drawOnChartArea: true,
                                    drawTicks: false,
                                    borderDash: [7, 5],
                                    color: 'rgba(255,255,255,.4)',
                                    zeroLineBorderDash: [7,5],
                                    zeroLineColor: 'rgba(255,255,255,.4)'
                                }
                            }]
                       }

                   }
               });
               this.chart = myChart;
           }
        },
        props:{
          labels:Array,
          data:Array,
          showTip:String,
          step:Number,
          rank:Number
        },
        created(){
        },
        mounted() {
            //document.getElementById('myChart').width = (document.documentElement.clientWidth - 50) + 'px';
        },
        deactivated() {
            this.chart.destroy();
        }
    }
</script>